<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>05_学子页面</title>
  <style>
    /********************公共css*********************/
    * {
      margin: 0;
      padding: 0;
    }
    a {text-decoration: none;}
    ul{list-style: none;}
    .center{
      width: 1000px;
      margin: 0  auto;
    }
    /* 设置所有图片的缩放 */
    .scale{
      transition: 1s;
    }
    .scale:hover{
      transform: scale(1.1);
    }

    /******************** 1F CSS ********************/
    .f1{
      overflow: hidden;
      margin-bottom: 10px;
    }
    /******************** 1F 左侧 CSS ***************/
    .f1 .left{
      width: 611px;
      height: 376px;
      background-color: #e8e8e8;
      float: left;
      margin-right: 10px;
      position: relative;
    }
    .f1>.left>.text{
                    /*background-color: pink;*/
                    width: 245px;
                    height: 232px;
                    margin-top: 68px;
                    margin-left: 36px;
    }
    .f1 .text>.p_title{font-size: 32px;
                             border: #333;
                              font-weight: lighter;
    }
    .f1 .text>.p_intro{font-size: 12px;
                             color: #666;
                             font-weight: lighter;
                             margin-top: 12px;
                              margin-bottom: 24px;
    }
    .f1 .text>.p_price{ font-size: 24px;
                              color: #0aa1ed;
                              font-weight: bold;
                              margin-bottom: 12px;
    }
    .f1 .text>a {
                      background-color: #0aa1ed;
                      display: block;
                      width: 132px;
                      height: 40px;
                      font-size: 20px;
                      color: #fff;
                      text-align: center;
                      line-height: 40px;
                      border-radius: 5px;
    }
    .f1>.left>img{
                  width: 318px;
                  height: 319px;
                  position: absolute;
                  top: 35px;
                  left: 265px;
    }
    /******************** 1F 右侧 CSS ***************/
    .f1>.right{
                width: 375px;
                height: 376px;
                background-color: #e8e8e8;
                float: left;
                position: relative;
    }
    .f1>.right>.text {
                      /*background-color: pink;*/
                      width: 245px;
                      height: 232px;
                      margin-top: 39px;
                      margin-left: 25px;
                      /* 设置一个温和的定位属性，然后设置层级，将文字区域层级调高，这样就不会被图片遮盖，影响点击按钮*/
                      position: relative;
                      z-index: 10;
    }
    .f1>.right>img{
                    width: 292px;
                    height: 232px;
                    position: absolute;
                    top: 130px;
                    left: 75px;
    }
    /******************** 2F CSS ***************/
    .f2{
        overflow: hidden;
    }
    /******************** 2F 左侧 CSS **************/
    .f2 .left{
              width: 366px;
              height: 233px;
              background-color: #e8e8e8;
              float: left;
              margin-right: 20px;
    }
    .f2 .left>.tit{
                    background-color: #0aa1ed;
                    height: 35px;
                    position: relative;
    }
    .f2 .left>.tit>img{
                      width: 29px;
                      height: 20px;
                      position:absolute;
                      top: 8px;
                      left: 10px;
    }
    .f2 .left>.tit>span{
                          color: #fff;
                          position: absolute;
                          left: 49px;
                          line-height: 35px;
    }
    .f2 .left>.item_all{
                        padding-left: 12px;
    }
    .f2 .left>.item_all>p{
                          font-size: 12px;
                          color: #62b5ec;
                          margin-top: 17px;
                        margin-bottom: 9px;
    }
    .f2 .left>.item_all>ul{
                           overflow: hidden;
    }
    .f2 .left>.item_all>ul>li{
                              float: left;
                              margin-right: 10px;
    }
    .f2 .left>.item_all>ul>li>a{
                            font-size: 12px;
                            color: #0aa1ed;
    }

    /******************** 2F 卡片 CSS **************/
    .f2 .card{
              width: 198px;
              height: 233px;
              background-color: #e8e8e8;
              float: left;
              margin-right: 8px;
              font-size: 12px;
              text-align: center;
    }
    .f2>.card>img{
       width: 100%;
     }
    .f2>.card>.p_intro{
                      font-weight: lighter;
    }
    .f2>.card>.p_price{
                      background-color: mediumpurple;
                      color: #0aa1ed;
                      font-weight: bold;
                      margin: 6px;
    }
    .f2>.card>a{
                background-color: #0aa1ed;
                color: #fff;
                display: block;
                width: 100px;
                height: 24px;
                margin: 0  auto;
                line-height: 24px;
    }
    .f2 .card3{
                margin: 0;
    }

  </style>
</head>
<body>
  <!--.main>/center>.f1>.left+.right-->
  <div class="main">
    <div class="center">
      <div class="f1">
        <div class="left">
          <div class="text">
                <p class="p_title">灵越 燃7000系列</p>
                <p class="p_intro">酷睿双核i5处理器|256GB SSD| 8GB内存<br>
                                   英特尔HD显卡620含共享显卡内存</p>
                <p class="p_price">￥4999.00</p>
                <a href="#">查看详情</a>
          </div>
        <img src="img/computer1.png" alt="" class="scale">
      </div>
      <div class="right">
        <div class="text">
          <p class="p_title">颜值 框不住</p>
          <p class="p_intro">酷睿双核i5处理器|256GB SSD| 8GB内存<br>
                             英特尔HD显卡620含共享显卡内存</p>
          <p class="p_price">￥6888.00</p>
          <a href="#">查看详情</a>
        </div>
        <img src="img/computer2.png" alt="" class="scale">
      </div>
    </div>
  <!--  .f2>.left+.carf*3-->
    <div class="f2">
      <div class="left">
        <div class="tit">
            <img src="img/icon.png" alt="">
            <span>电脑，办公/1F</span>
        </div>
      <div class="item_all">
        <p>电脑整机</p>
          <ul>
            <li><a href="#">笔记本</a></li>
            <li><a href="#">游戏机</a></li>
            <li><a href="#">台式机</a></li>
            <li><a href="#">一体机</a></li>
            <li><a href="#">服务器</a></li>
            <li><a href="#">联想</a></li>
          </ul>
        <p>电脑配件</p>
          <ul>
            <li><a href="#">CPU</a></li>
            <li><a href="#">SDD硬盘</a></li>
            <li><a href="#">显示器</a></li>
            <li><a href="#">显卡</a></li>
            <li><a href="#">组装电脑</a></li>
            <li><a href="#">机箱</a></li>
          </ul>
        <p>外设/游戏</p>
          <ul>
            <li><a href="#">键盘</a></li>
            <li><a href="#">鼠标</a></li>
            <li><a href="#">U盘</a></li>
            <li><a href="#">移动硬盘</a></li>
            <li><a href="#">游戏设备</a></li>
            <li><a href="#">智能单车</a></li>
          </ul>
      </div>
      </div>

      <div class="card">
        <img src="img/computer3.png" class="scale">
          <p class="p_intro">
            戴尔(DELL)XPS13-9360-R1609 13.3英<br>
            寸微边框笔记本电脑
          </p>
          <p class="p_price">￥4600.00</p>
          <a href="#">查看详情</a>
      </div>
      <div class="card">
        <img src="img/computer4.png" class="scale">
          <p class="p_intro">
            14.8mm超轻薄笔记本电脑 航海王版<br>
            13.3英寸微边框笔记本电脑
          </p>
        <p class="p_price">￥5600.00</p>
        <a href="#">查看详情</a>
      </div>
      <div class="card card3">
        <img src="img/computer3.png" class="scale">
        <p class="p_intro">
          联想(Lenovo) YOGA900 多彩版 13.3<br>
          英寸微边框笔记本电脑
        </p>
        <p class="p_price">￥6600.00</p>
        <a href="#">查看详情</a>
      </div>
    </div>
  </div>
</div>
</body>
</html>